<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
  .head {
    width: 124px;
    margin: 150px auto;
    position: relative;
  }

  /* 头像样式 */
  .head img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid skyblue;
  }
  .head-txt {
    width: 200px;
    height: 140px;
    background-color: rgb(213, 241, 252);
    /* 
            绝对定位
            left的距离=头像宽+左右border+三角形的宽
            top=(自身高-相对定位元素高）/2
         */
    position: absolute;
    left: 124px;
    top: -20px;
    border-radius: 20px;
    line-height: 100px;
    text-align: center;
    /* 最开始会话框隐藏 */
    display: none;
  }
  .head-txt::after {
    display: block;
    content: "";
    width: 0;
    border: 20px solid transparent;
    border-right-color: rgb(213, 241, 252);
    /* 
            三角形相对的是.head-txt这个盒子定位
            top值 = （.head-txt高140-三角形高40）/ 2
            left值 = 三角形宽的2倍，因为左边还有一个透明的三角形 
        */
    position: absolute;
    top: 50px;
    left: -40px;
  }
  .head:hover .head-txt {
    display: block;
  }
</style>
<body>
  <div class="head">
    <img src="../html+css/images/04-1.webp" alt="" />
    <div class="head-txt">大家好，我是小美</div>
  </div>
</body>
</html>
